<template>
    <div class="box">
        <div class="top">
            <header>
                <div class="carNum">
                    号牌号码：{{carInfo.carNum}}
                </div>
                <div class="rate">
                    <van-rate v-model="rate" />
                    <p>点击评价此次服务</p>
                </div>
            </header>
        </div>
        <h4>大厂全顺机动车检测有限公司</h4>
        <div class="message" >
            <van-field
            ref="message"
            v-model="message"
            rows="5"
            autosize
            type="textarea"
            maxlength="100"
            show-word-limit
            /> <span @click="messageClick" v-if="!message">留言板</span>
        </div>
        <h3>上传图片/视频</h3>
        <div class="btm">
            <footer>
                <div class="item" @click="upload(index)" v-for="(item,index) in fileList" :key="index">
                    <van-uploader accept="image/*,video/*"  :after-read="afterRead" >
                        <van-button>
                            <img v-if="!item.data" :src="item.url" alt="">
                            <img v-else-if="!item.video" :src="item.data.content" alt="">
                            <p v-else>{{item.data.file.name}}</p>
                            <div v-if="item.data" class="close" @click.stop="closeFile(index)">
                                <van-icon name="close" />
                            </div>
                        </van-button>
                    </van-uploader>
                </div>
                
            </footer>
            
        </div>
        <div class="submit_btn">
            <van-button color="#27b5a7" class="submit" :loading="loading" @click="addComment" type="primary" size="normal">提交</van-button>
        </div>
        <foot :navUrl="url"/>
    </div>
</template>
<script>
import foot from '@/views/footer.vue'
//import pdf from 'vue-pdf'
export default {
    name:'electronicOrder',
    data(){
        return{
            url:'/order',
            rate:null,//星
            carInfo:[],
            message:'',//留言
            fileList:[
                {data:null,url:require('../../assets/img/icon/upload2.png'),video:false},
                {data:null,url:require('../../assets/img/icon/upload2.png'),video:false},
                {data:null,url:require('../../assets/img/icon/upload2.png'),video:false},
            ],
            index:null,
            loading:false,
        }
    },
    created(){
        console.log(this.fileList)
        console.log(this.$route, '---- 车辆详情 --------')
        if (this.$route.params.carInfo) {
            this.carInfo = this.$route.params.carInfo
        }else{
            this.$router.push('/order')
        }
        
    },

    methods:{
        messageClick(){
            this.$refs.message.focus()
        },
        //文件上传
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);

            if (file.file.size>5*1024*1024) {
                this.$toast('请上传小于5M的文件')
            } else {
                if (file.file.type != 'video/mp4' && (file.file.type != 'image/jpeg' && (file.file.type != 'image/jpg' && file.file.type != 'image/png'))) {
                    this.$toast('目前只支持.mp4 .jpg .jpeg .png格式的文件上传')
                }else{
                    if (file.file.type === 'image/mp4') {
                        this.fileList[this.index].data = file
                        this.fileList[this.index].video = true
                    }else{
                        this.fileList[this.index].data = file
                        this.fileList[this.index].video = false
                    }
                    
                }
            }
            console.log(this.fileList)
        },
        upload(el){
            console.log('当前是------',el)
            this.index = el
        },
        closeFile(el){
            console.log('当前是------',el)
            this.fileList[el].data = null
             console.log(this.fileList)
        },
        //评论提交
        async addComment(){
            let files1,files2,files3
            if (this.fileList[0].data) {
                files1 = this.fileList[0].data.file
            }
            if (this.fileList[1].data) {
                files2 = this.fileList[1].data.file
            }
            if (this.fileList[2].data) {
                files3 = this.fileList[2].data.file
            }
            let primary = {
                orderId:this.carInfo.id,
                //orderId:214,
                star:this.rate,
                comment:this.message,
                file1:files1,
                file2:files2,
                file3:files3
            }
            console.log('primary-----------',primary)
            if (!primary.star) {
                this.$toast('请选择星星个数')
            }else{
                this.loading = true
                let res = await this.fileAjax.post(
                    '/carStation/api/order/addComment.do',
                    primary
                )
                this.loading = false
                console.log('res.data.status----',res)
                if(res.status === 200){
                    if (res.data.status === '200') {
                        this.$toast(res.data.message)
                        this.$router.push('/order')
                    }else{
                        this.$toast(res.data.message)
                    }
                }else{
                    this.$toast(res.message)
                }
            }
        }
    },
    filters:{
        dateStyle(v){
            let date = new Date(v)
            let Y = date.getFullYear()
            let M = date.getMonth()+1
            let D = date.getDate()
            if (M<10) {
                M = '0'+M
            }
            if (D<10) {
                D = '0'+D
            }
            let value = Y+'-'+M+'-'+D
            return value
        }
    },
    components:{
        foot,
        //pdf
    }
}
</script>
<style lang="less" scoped>
    .close{
        position: absolute;
        right: -10px;
        top:-10px;
        z-index: 999;
        font-size: 20px;
        background-color: #fff;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        i{
            top:-8px
        }
    }
    .box{
        background-color: #efefef;
        width: 100%;
        height: 100%;
        overflow: hidden;
        h4{
            width: 96%;
            margin: 0.3rem auto;
        }
        .top{
            width: 96%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: .2rem 0.2rem 0 0;
            margin: 0.4rem auto 0 auto;
            padding:0.6rem 0.4rem 0 0.4rem;
            .carNum{
                color:#ccc
            }
            .rate{
                margin-top: 0.4rem;
                display: flex;
                justify-content: space-between;
                p{
                    line-height: 0.8rem;
                }
            }
        }
        .message{
            width: 96%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 0.2rem;
            margin:0 auto;
            height: 6rem;
            position: relative;
            font-size: 0.35rem;
            line-height: 0.6rem;
            padding: 0.3rem;
            span{
                font-size: 0.8rem;
                color:#ccc;
                position: absolute;
                left: 38%;
                top:40%;
            }
        }
        .btm{
            width: 96%;
            margin: 0.3rem auto;
            background-color: #fff;
            padding:0.4rem;
            box-sizing: border-box;
            border-radius: .2rem;
            footer{
                display: flex;
                justify-content: space-between;
                .van-button{
                    width: 2.5rem;
                    height: 2.5rem;
                    padding: 0;
                    border: 0;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
           
        }
        h3{
            font-size: 0.6rem;
            width: 96%;
            margin: 0.2rem auto;
        }
        .submit_btn{
            text-align: center;
        }
        .submit{
            width: 90%;
            margin:.8rem auto 4rem auto
        }
    }
</style>